<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="node" :class="{active: isActive}" @click="handleItem">
    <div class="head">
      <div class="title" style="color: green;">{{title}}</div>
      <div class="delete" @click.stop="handleDelete" style="color: black;">×</div>
    </div>
    <div class="content">
      <div class="man"><div class="text"><slot /></div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    }
  },
  computed: {
    title() {
      const {
        taskName
      } = this.item

      if (taskName) {
        return taskName
      }

      return `条件${this.index + 1}`
    }
  },
  methods: {
    handleItem(e) {
      this.$emit('on-set', e, this.item)
    },
    handleDelete(e) {
      this.$emit('on-del', e, this.item, this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../node/item.scss';
</style>
